/*
 * @Author:张晨旭
 * @Date: 2021-04-23 19:00:13
 * @LastEditTime: 2021-04-29 16:25:39
 * @LastEditors: 韩双双
 * @Description: In User Settings Edit
 * @FilePath: \riboa\daily-1807a-6\项目代码\project2\wipi\src\components\details.tsx 
 */ 
import useStore from '@/context/useStore'
import React, { useEffect, useRef, useState } from 'react';

import { observer } from 'mobx-react-lite'
import styles from "./Details.less"
import Loding from "@/component/Articel/loding"
import { Affix } from "antd"
import Highlight from "@/component/File/highlight"
import Viewe from "@/component/File/viewerImage"

interface Iprops {
  match: any
}

function Details(props: Iprops) {
  let { file } = useStore()
  const [top, setTop] = useState(10);
  const [active, setActive] = useState(0);
  // console.log( file.Detail.toc )
  //获取id  传入仓库  调用接口  渲染页面
  useEffect(() => {
    file.getdetail(props.match.params.id)
  }, [props.match.params.id])

  //点击目录进行滚动
  const scrollElement = (index: number, text: string) => {
    setActive(index);
    Array.from(document.querySelectorAll("h2")).forEach((item) => {
      item.innerText === text ? item.scrollIntoView() : " ";
    })
    // console.log(Array.from(document.querySelectorAll("h2")));
  }

  const ref = useRef(null)
  return (
    <div key={file.Detail.id} className={styles.Details}>

      <div className={styles.left}>
        <img src={file.Detail.cover} alt="" />
        <h1> {file.Detail.title} </h1>

        {/* 
          * 可以直接获取
          *  <div  dangerouslySetInnerHTML = {{__html:file.Detail.summary || file.Detail.content}}></div> */}

        <Viewe>
          {/* <div ref={()=>{ref}} dangerouslySetInnerHTML = {{__html:file.Detail.html || file.Detail.content}}></div> */}
          <div> <Highlight str={file.Detail.html} /> </div>
        </Viewe>
      </div>

      <div className={styles.right}>
        <Affix offsetTop={top}>
          <div>
            <Loding />
            <div className={styles.rBox}>
              <h3> 目录 </h3>
              <ul>
                {
                  file.Detail.toc && JSON.parse(file.Detail.toc).map((item: any, index: number) => {
                    return <li
                      className={index == active ? "active" : " "}
                      key={item.id}
                      onClick={() => scrollElement(index, item.text)} >
                      <div>
                        {item.text}
                      </div>
                    </li>
                  })
                }
              </ul>
            </div>
          </div>
        </Affix>
      </div>
      
    </div>

  )
}
export default observer(Details)